﻿	<div id="ConfigForm">
	Bitte ein Web auswählen:
	<br />
	<select data-bind="options: Webs, optionsText: 'name', value: Web">
	</select><br />
	<br />
	<br />
	Bitte eine Liste auswählen:
	<br />
	<select data-bind="enable: Lists().length > 0, options: Lists, optionsText: 'name', value: List">
	</select><br />
	<br />
	<br />
	CAML oder View:<br />
	<select data-bind="options: ViewOptions, value: ViewOption">
	</select>
	<select data-bind="visible:ViewOption() == 'View', enable: Views().length > 0, options:Views, optionsText: 'name', value: View">
	</select>
	<div data-bind="visible:ViewOption() =='CAML'">
		<textarea id="CAMLQuery" data-bind="value: Caml" cols="30" rows="10"> </textarea><br />
		URL Paramater: <input title="Es werden die Parameter dynamisch aus der URL geladen und in das CAML Query eingetragen.<br/> Mehrere Parameter sind Möglich, die Trennung erfolgt durch ein Semikolon (;) <br>Beispiel: <i>ID</i>" type="text" data-bind=" value: QueryParam" />
	</div>
	<br />
	<br />
	Felder Auswählen die Gruppiert werden sollen:
	<br />
	<select data-bind="enable: Fields().length > 0, options: Fields, optionsText: 'name', value:curGroupField"
		size="10" title="Ein Click auf ein Feld fügt es der Gruppierungsliste hinzu.">
	</select>
	<select title="Ein Click auf ein Feld entfernt es aus der Grupierungsliste" data-bind="enable: Fields().length > 0, options: GroupFields, optionsText: 'name', value: deselectedGroupField"
		size="10">
	</select>
	<br />
	<br />
	Spaltennamen verändern:<span class="info" title="Die Spalte auswählen, dann den neuen Spaltennamen eintragen und mit + hinzufügen"></span>
	<br />
	<select id="oldName" data-bind="enable: Fields().length > 0, options: Fields, optionsText: 'name', optionsValue:'name'">
	</select>
	<input type="text" id="newName"  /><a title="test" data-bind="click: addDisplayName" class="add"></a>
	<ul data-bind="template: {name: 'DisplayNames-template', foreach:DisplayNames}">
	</ul>
	<script type="text/html" id="DisplayNames-template">
		<li>Aus "<span data-bind="text:name"></span>" wird "<span data-bind="text: display"></span>". <a data-bind="click:remove" class="delete"></a></li> 
	</script>
	<br />
	Berechnete Spalten einfügen:<span class="info" title="Die Spalte auswählen, dann die Operation auswählen, optional ein Format eintragen und mit + Bestätigen"></span>
	<br />
	<select data-bind="enable: Fields().length >0, options: Fields, optionsText: 'name', value: curCalcField "
		id="calcField">
	</select><select data-bind="options: CalcOperations, optionsText: 'display', optionsValue: 'value'"
		id="calcOperation"></select><input type="text" id="calcFormat" title="<b>Optional</b>: hier kann noch ein Format angegeben werden. Die Zahl wird dabei durch {0} eingefügt. Standardmäßig wird {0} benutzt.<br/> Beispiel: <i>Insgesamt {0} Wochen</i>" /><a data-bind="click:addCalcField"
			class="add"></a>
	<ul data-bind="template: {name: 'CalcField-template', foreach:CalcFields}">
	</ul>
	<script type="text/html" id="CalcField-template">
		<li>Aus "<span data-bind="text:Display()"></span> <a data-bind="click:remove" class="delete"></a></li> 
	</script>
	<br />
	<br />
	Gruppen schließen? <input type="checkbox" data-bind="checked: Closed" /><br />
	<br />

	<button data-bind="click: save">
		SPEICHERN</button>
	<a onclick="$.colorbox.close()" class="close">Schließen</a>
	<script type="text/javascript">
	    getWebs();

		ko.applyBindings(TableConfig);

		var old = $(".JSON").val();
		if (old) {
			old = JSON.parse(old);
		}

		function load() {
			ko.utils.arrayFilter(TableConfig.Webs(), function (item) {
				if (item.name == old.Web.name) {
					TableConfig.Web(item);
				}
			});

			ko.utils.arrayFilter(TableConfig.Lists(), function (item) {
				if (item.name == old.List.name) {
					TableConfig.List(item);
				}
			});
			TableConfig.ViewOption(old.ViewOption);
			if (old.ViewOption == "View") {
				ko.utils.arrayFilter(TableConfig.Views(), function (item) {
					if (item.id == old.View.id) {
						TableConfig.View(item);
					}
				});
			} else {
				TableConfig.Caml(old.Caml);
				TableConfig.QueryParam(old.QueryParam);
			}


			ko.utils.arrayForEach(old.DisplayNames, function (item) {
				TableConfig.DisplayNames.push(new DisplayName(item.name, item.display));
			});

			ko.utils.arrayForEach(old.CalcFields, function (item) {
				TableConfig.CalcFields.push(new CalcField(item.field, item.operation, item.format));
			});

			ko.utils.arrayForEach(old.GroupFields, function (item) {
			    ko.utils.arrayFilter(TableConfig.Fields(), function (_item) {
			        if (_item) {
			            if (item.internalName == _item.internalName) {
			                TableConfig.curGroupField(_item);
			            }
			        }
			    });
			});
			TableConfig.Closed(old.Closed);

		}
		if (old) {
			load();
		}

		$(function () {
			$('#ConfigForm [title]').qtip({
				position: {
					my: 'bottom center',
					at: 'top center'
				},
				style: {
					classes: 'ui-tooltip-bootstrap'
				}
			});
		});
	</script>
</div>
